﻿
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--商品详情页</title>
	 <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />

	<style type="text/css">
	.goods-intro-list li {
		display: inline-block;
		width: 300px;
	}
       .Ptable {
           margin: 10px 0;
       }
       .Ptable-item {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
               border-bottom: 1px solid #eee;
        }
       .Ptable-item h3 {
           width: 110px;
           text-align: right;
       }
       .Ptable-item h3, .package-list h3 {
           font-weight: 400;
           font-size: 12px;
           float: left;
       }
       h3 {
           display: block;
           font-size: 1.17em;
           -webkit-margin-before: 1em;
           -webkit-margin-after: 1em;
           -webkit-margin-start: 0px;
           -webkit-margin-end: 0px;
           font-weight: bold;
       }
       .Ptable-item dl {
           margin-left: 110px;
       }
       dl {
           display: block;
           -webkit-margin-before: 1em;
           -webkit-margin-after: 1em;
           -webkit-margin-start: 0px;
           -webkit-margin-end: 0px;
       }
       .Ptable-item dt {
           width: 160px;
           float: left;
           text-align: right;
           padding-right: 5px;
       }
       .Ptable-item dd {
           margin-left: 210px;
       }
       dd {
           display: block;
           -webkit-margin-start: 40px;
       }
       .package-list {
           padding: 12px 0;
           line-height: 220%;
           color: #999;
           font-size: 12px;
           margin-top: -1px;
       }
       .package-list h3 {
           width: 130px;
           text-align: right;
       }
       .package-list p {
           margin-left: 155px;
           padding-right: 50px;
       }

	.tbb {
		width: 400px;
		height: 100px;
		border: 2px solid #e9e9eb;
		background-color: #ffffff;
		position: absolute; left: 50%; top: 50%;
		z-index: 100;

		/*display: none;*/

		/*position: absolute;*/
	}
</style>

</head>

<body>



<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<div id="itemApp">

	<div v-if="isShow" >
		<table class="tbb"  >
			<thead>
			</thead>
			<tbody>
			<tr>
				<td>
					<img src="/img/yes.png" width="30" height="30" />
				</td>
				<td >
					{{FavoriteCode}}
				</td>
				<td >
					<a href="#" @click="isShow = false" > <img src="/img/close.png" width="30" height="30" > </a>
				</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div id="nav-bottom">
		<ly-top />
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li th:each="category : ${categories}">
						<a href="#" th:text="${category.name}">手机</a>
					</li>
					<li>
						<a href="#" th:text="${brand.name}">Apple666</a>
					</li>
					<li class="active" th:text="${spuName}">Apple iPhone 6s</li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<li v-for="(image,i) in images" :key="i">
										<img :src="image" :bimg="image" onmousemove="preview(this)" />
									</li>
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4>{{selectedSku.title}}</h4>
					</div>
					<div class="news"><span th:utext="${subTitle}">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title"><i>价　　格</i></div>
							<div class="fl price">
								<i>¥</i><em>{{ly.formatPrice(selectedSku.price)}}</em><span>降价通知</span>
							</div>
							<div class="fr remark"><i>累计评价</i><em>612188</em></div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">上海 <span>有货</span></em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<dl v-for="(value,key,index) in specialSpec" :key="index">
								<dt>
									<div class="fl title">
									<i>{{params[key]}}</i>
								</div>
								</dt>
								<dd v-for="(v,i) in value" :key="i" @click="myLocked(id, i)">
									<!--http://www.leyou.com/item/26.html  @click="myLocked(id, i)"-->
									<!--http://www.leyou.com/item/157.html-->
									<a href="javascript:void (0)"  :class="{selected:indexes[key]==i,locked:locked(key, i)}" @click="indexes[key]=i">
										{{v}}<span title="点击取消选择">&nbsp;</span>
									</a>
								</dd>
							</dl>
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" disabled v-model="num" minnum="1" class="itxt" />
										<a href="javascript:void(0)" @click="increment" class="increment plus">+</a>
										<a href="javascript:void(0)" @click="decrement" class="increment mins">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="javascript:void(0)" @click="favorite"  class="sui-btn  btn-danger addshopcar"> 收藏</a>
									</li>
									<li>
										<a href="javascript:void(0)" class="sui-btn  btn-danger addshopcar" @click="addCart">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="/img/_/l-m01.png" />
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="">
											<img src="/img/_/dp01.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>39</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp02.png" /> </div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>50</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp03.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>59</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp04.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>99</span>
  </label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab" @click="showComment">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro-list unstyled" style="list-style: none;">
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品毛重：0.51kg</li>
									<li>商品产地：中国大陆</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
									<li>系统：苹果（IOS）</li>
									<li>像素：1000-1600万</li>
									<li>机身内存：64GB</li>
								</ul>
								<!--商品详情-->
								<div class="intro-detail" th:utext="${detail.description}">
									<img src="/img/_/intro01.png" />
									<img src="/img/_/intro02.png" />
									<img src="/img/_/intro03.png" />
								</div>
							</div>
							<div id="two" class="tab-pane">
								<div class="Ptable">
    <div class="Ptable-item">
        <h3>主体</h3>
        <dl>
            <dt>品牌</dt><dd>华为（HUAWEI）</dd>
            <dt>型号</dt><dd>CLT-AL00</dd>
            <dt>入网型号</dt><dd>CLT-AL00</dd>
            <dt>上市年份</dt><dd>2018年</dd>
            <dt>上市月份</dt><dd>4月</dd>
        </dl>
    </div>
    <div class="Ptable-item">
        <h3>基本信息</h3>
        <dl>
            <dt>机身颜色</dt><dd>宝石蓝</dd>
            <dt>机身长度（mm）</dt><dd>155.0 </dd>
            <dt>机身宽度（mm）</dt><dd>73.9 </dd>
            <dt>机身厚度（mm）</dt><dd>7.8</dd>
            <dt>机身重量（g）</dt><dd>约180g（含电池）</dd>
            <dt>输入方式</dt><dd>触控</dd>
            <dt>运营商标志或内容</dt><dd>无</dd>
            <dt>机身材质分类</dt><dd>玻璃后盖</dd>
        </dl>
    </div>
</div>
<div class="package-list">
    <h3>包装清单</h3>
    <p>手机X1、快速指南X1、华为SuperCharge 充电器X1、三包凭证X1、Type-C 数字耳机X1、Type-C 数据线X1、取卡针X1、TPU保护壳X1、USB Type-C转3.5mm耳机转接线X1（备注：最终以实物为准）</p>
</div>

							</div>
							<div id="three" class="tab-pane">
								<p>售后保障</p>
							</div>
							<div id="four" class="tab-pane">
								<td>
									<span>商品评价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									<input type="radio" @click="starMethod(0)" name="star">全部&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" @click="starMethod(5)" name="star">5星&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" @click="starMethod(4)" name="star">4星&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" @click="starMethod(3)" name="star">3星&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" @click="starMethod(2)" name="star">2星&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" @click="starMethod(1)" name="star">1星&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="checkbox" v-model="isSkuId" @change="showComment()">只显示当前sku评价
								</td>


								<p></p>
								<div>
									<button @click="showForm()">点击显示</button>
									<div class="mask" v-if="show" @click="show=false">
										<div class="pop" v-if="show">
											<form action="javascript:void(0)">
												<td>
													<li>请对商品打分: &nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio" value="5" name="commentLevel" v-model="commentLevel">5星&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio" value="4" name="commentLevel" v-model="commentLevel">4星&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio" value="3" name="commentLevel" v-model="commentLevel">3星&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio" value="2" name="commentLevel" v-model="commentLevel">2星&nbsp;&nbsp;&nbsp;&nbsp;
														<input type="radio" value="1" name="commentLevel" v-model="commentLevel">1星&nbsp;&nbsp;&nbsp;&nbsp;
													</li>
													<li>尽情吐槽: <input type="text" name="comment" v-model="comment"/></li>
												</td>
												<input type="submit" value="提交" @click="saveComment()" />
											</form>
										</div>
									</div>
								</div>

								<div class="comment" v-for="(value, index) in items" :key="index">
										<span>用户名：{{value.userName}}
											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
											满意等级：{{value.commentLevel}}星</span><br/>
									<span>评论：</span><span style="color: red">{{value.comment}}</span><br/>
									<span>评论时间： {{ly.formatDate(value.createTime)}}&nbsp;&nbsp;&nbsp;
											<a href="javascript:void(0)" @click="addLike(value.id, value.likeCount)">赞({{ value.likeCount }})</a>/
											<a href="javascript:void(0)" @click="addFuck(value.id, value.fuckCount)">屌({{ value.fuckCount }})</a>
										</span>
									<hr/>
								</div>


								<div>
									<ul class="pagination">
										<li><a href="javascript:void(0)" @click="toPage(1)">首页</a></li>
										<li :class="{prev:true, disabled:searchParms.page==1}">
											<a href="javascript:void(0)" @click="prePage">«上一页</a>
										</li>
										<li :class="{active:index(i)==searchParms.page}" v-for="i in Math.min(10, totalPage)" :key="i">
											<a href="javascript:void(0)" v-if="curPage == i" class="active" @click="toPage(index(i))">{{ index(i) }}</a>
											<a href="javascript:void(0)" v-else @click="toPage(index(i))">{{ index(i) }}</a>
										</li>
										<li :class="{next:true, disabled: searchParms.page==totalPage}">
											<a href="javascript:void(0)" @click="nextPage">下一页»</a>
										</li>
										<li><a href="javascript:void(0)" @click="toPage(totalPage)">尾页</a></li>
									</ul>
								</div>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>

<script th:inline="javascript">
	//1.取出spuDetail对象
    const detail = /*[[${detail}]]*/ {};
    //2.取出spuDetail的specialSpec，转换为json对象
    let specialSpec = JSON.parse(detail.specialSpec);

	//设置对象: {4:'颜色','12','内存'...}
	let params = {};
	//取出所有参数组
    const specs = /*[[${specs}]]*/ [];
    //取出所有特有的规格参数数据
	specs.forEach(spec=>{ //遍历所有组
	    //遍历组内规格参数
        spec.params.forEach(param=>{
            //选出特有的规格参数即可
			if(!param.generic) {
                params[param.id] = param.name;
            }
		})
	})

	//定义一个对象，用于存储当前选择的特有规格参数
	let indexes = {};
	//给indexes初始化为第一个参数默认选中
    for(let key in params){
        indexes[key] = 0;
	}

	//取出当前商品的所有sku对象
    const skus = /*[[${skus}]]*/ [];
	const indexArr = skus.map(s => s.indexes);

</script>

<script>
    var itemVm = new Vue({
        el:"#itemApp",
        data:{
            specialSpec,
            params,
            indexes,
			FavoriteCode: '',
            skus,
			isShow:false,
			ly,
			num: 1, //购买的商品数量
			indexArr,
			commentLevel:1,
			comment:"",
			show:false,
			defSkuId:0,
			isSkuId:false,
			curPage : 0,

			searchParms:{
				key:"",
				page:1,
				filterParams:{},
			},
			//后端->前端
			items:[],//当前页数据列表
			total:0, //总记录数
			totalPage:0, //总页数
			//pageObj	// 分页对象
        },
		computed:{
           //定义当前选中的Sku对象
			selectedSku(){
			    //selectedSku对象的值会随着indexes的变化而变化
				//1.把indexes变量转换为字符串格式：3_0_0
				//Object.values(): 将指定对象的所有value值取出，返回给数组格式
                //join(): 数组的方法，把数组的每个元素使用指定分隔分隔，返回字符串
				let indexStr = Object.values(this.indexes).join("_");

				/*let selectSku = {};
				this.skus.forEach(sku=>{
				    if(sku.indexes==indexStr){
                        selectSku = sku;
					}
				})
				return selectSku;*/

				//find(): 从数组匹配符合条件的对象，并返回符合条件对象
			    return this.skus.find(sku=>sku.indexes==indexStr);
			},
			//记录当前选中的Sku的图片列表
			images(){
			    return this.selectedSku.images.split(",") || [];
			}
		},
		methods:{
            //判断用户是否登录方法
			verifyUser(){
                return ly.http.get('/auth/verify');
			},
			//收藏
			favorite(){
				this.verifyUser().then(resp=>{
					//已登录
					ly.http.get('/order/favorite?skuId='+this.selectedSku.id).then(resp=>{
						if (resp.status==1){
							this.FavoriteCode = '已加入收藏夹'
						}else {
							this.FavoriteCode = '已经在收藏夹中了哦~'
						}
						this.isShow = true;
					}).catch(e=>{
						console.log(e)
						console.log("服务器可能有问题了哦")
					})
				})
			},
           //添加购物车
            addCart(){
				//判断用户是否登录
				this.verifyUser().then(resp=>{
				    //已经登录
					ly.http.post('/cart',{
                        skuId: this.selectedSku.id,
                        title: this.selectedSku.title,
                        price: this.selectedSku.price,
                        image: this.images[0],
                        num: this.num,
                        ownSpec:this.selectedSku.ownSpec
                    }).then(resp=>{
                        //跳转到购物车页面
                        window.location.href="http://www.leyou.com/cart.html";
					}).catch(e=>{
                        console.log('添加购物车失败');
					})

				}).catch(e=>{
				    //未登录

					//判断当前商品是否已经存在于购物车
					//1）取出现在的购物车的数据
					let carts = ly.store.get('LY_CART') || [];

					//在carts数组查询sku的id相等的商品
					let cart = carts.find(cart=>cart.skuId==this.selectedSku.id);

					if(cart){
                        //如果存在，则当前商品数量增加
						cart.num += this.num;
					}else{
                        //如果不存在，则添加新的商品对象
                        carts.push(
                            {
                                skuId: this.selectedSku.id,
                                title: this.selectedSku.title,
                                price: this.selectedSku.price,
                                image: this.images[0],
                                num: this.num,
                                ownSpec:this.selectedSku.ownSpec
                            }
						);
					}

					//重新写回localStorage
					ly.store.set('LY_CART',carts);
					//跳转到购物车页面
					window.location.href="http://www.leyou.com/cart.html";
				});
			},

            //增加数量
            increment(){
				this.num++;
            },

            //减少数量
            decrement(){
				if(this.num>1){
				    this.num--;
				}
            },
			locked(id,i){
				if(this.specialSpec[id].length === 1) return false;
				// 如果有其它项未选，不锁定
				let boo = true;
				Object.keys(this.indexes).forEach(key => {
					if (key !== id && this.indexes[key] == null) {
						boo = false;
						return;
					}
				});
				if (!boo) return false;
				// 如果当前项的组合不存在，锁定
				const {...o} = this.indexes;
				o[id] = i;
				const index = Object.values(o).join("_");
				return !indexArr.includes(index);
			},
			myLocked(id, i) {
				// 先判断当前选中的是否是锁定项
				const isLocked = this.locked(id, i);
				// 无论是否是锁定项，都允许修改
				this.indexes[id] = i;
				// 如果是锁定项，则需要调整其它项的选中状态
				if (isLocked) {
					Object.keys(this.indexes).forEach(key => {
						if (key !== id) {
							const remainSpec = specialSpec[key].filter((e, j) => !this.locked(key, j));
							this.indexes[key] = remainSpec.length === 1 ? specialSpec[key].findIndex(e => e === remainSpec[0]) : null;
						}
					})
				}

			},
			// 获取评价列表
			showComment(){
				if (this.isSkuId){
					this.defSkuId=this.selectedSku.id;
				}else {
					this.defSkuId=0;
				}
				ly.http.get("/comment/commentPage",{
					params: {
						"page": this.searchParms.page,
						"spuId": this.selectedSku.spuId,
						"skuId": this.defSkuId,
						"level": this.star
					}
				}).then(resp=>{
					this.items = resp.data.items;
					this.total = resp.data.total;
					this.totalPage = resp.data.totalPage;
					//this.pageObj = resp.data
				}).catch(err=>{
					console.log(err)
				})
			},
			index(i){
				if (this.searchParms.page<=3 || this.totalPage<=5){
					return i;
				} else if (this.searchParms.page>=this.totalPage-2){
					return this.totalPage-5+i;
				} else {
					return this.searchParms.page-3+i;
				}
			},
			prePage(){
				if (this.searchParms.page>1){
					this.searchParms.page--;
				}
			},
			nextPage(){
				if (this.searchParms.page<this.totalPage){
					this.searchParms.page++;
				}
			},
			toPage(i){
				this.curPage = i;
				this.searchParms.page = i;
			},
			// 换页
			pageChange(){
				if (this.isSkuId){
					this.defSkuId=this.selectedSku.id;
				}else {
					this.defSkuId=0;
				}
				ly.http.get("/comment/pageChange", {
					params: {
						"page": this.searchParms.page,
						"spuId": this.selectedSku.spuId,
						"skuId": this.defSkuId,
						"level": this.star
					}
				}).then(resp=>{
					//接收后端返回的数据
					this.items=resp.data.items;
				}).catch(err=>{
					console.log(err)
				})
			},
			starMethod(level){
				this.star = level;
				this.showComment()
			},
			addLike(id, likeCount){
				ly.http.get("/comment/addLike",{
					params:{
						"id":id,
						"likeCount": likeCount
					}
				}).then(resp=>{
					if (!resp.data){
						alert("请先登录！！！")
					}
					this.showComment()
				}).catch(err=>{console.log(err)})
			},
			addFuck(id, fuckCount){
				ly.http.get("/comment/addFuck",{
					params:{
						"id":id,
						"fuckCount": fuckCount
					}
				}).then(resp=>{
					this.showComment()
				}).catch(err=>{console.log(err)})
			},
			// 弹出表格
			showForm(){
				this.show = !this.show;
			},
			// 添加评价
			saveComment(){
				ly.http.get("/comment/saveComment",{
					params:{
						"commentLevel": this.commentLevel,
						"comment": this.comment,
						"spuId": this.selectedSku.spuId,
						"skuId": this.selectedSku.id
					}
				}).then(resp=>{
					this.show = false;
					this.showComment()
				}).catch(err=>{console.log(err)})
			}

		},
        components:{
            lyTop: () => import('/js/pages/top.js')
        }
    });
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<!--<script type="text/javascript" src="index/index.js"></script>-->

<style>
	ul.pagination {
		display: inline-block;
		padding: 0;
		margin: 0;
	}

	ul.pagination li {display: inline;}

	ul.pagination li a {
		color: black;
		float: left;
		padding: 8px 16px;
		text-decoration: none;
		border-radius: 5px;
	}

	ul.pagination li a.active {
		background-color: #c81623;
		color: white;
		border-radius: 5px;
	}

	ul.pagination li a:hover:not(.active) {background-color: #c81623;color: white;}

</style>

<style scoped>

	.mask {
		background-color: grey;
		/*opacity: 0.3;*/
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1
	}
	.pop {
		background-color: yellow;
		position: fixed;
		top: 30%;
		left: 35%;
		width: 600px;
		height:400px;
		z-index: 2
	}
</style>

</body>

</html>